<template>
  <div class="video_list">
    <div class="video_list--title">
      <span>文件列表</span>
    </div>
    <ul v-ps>
      <li v-for="item in videos"
        class="video_list--item"
        :key="item.id"
        :vid="item.id"
        :row="item">
        <img class="item_thumbnail"
          :src="getThumbnailUrl(item.id)"
          @click="handleLinkClick">
        <a class="item_name"
          @click="handleLinkClick">
          <el-tooltip effect="dark"
            placement="left"
            :content="item.name">
            <span @click.stop="handleLinkClick">
              {{ item.name }}
            </span>
          </el-tooltip>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import $ from 'jquery'
import * as thumbnailService from '@/api/services/thumbnailService'

export default {
  name: 'WsVideoList',
  props: {
    videos: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    /**
     * 点击链接
     */
    handleLinkClick (e) {
      let id = $(e.target).parents('li').attr('vid')
      this.activeVideo = this.getVideoById(id)
      this.$emit('video-change', this.activeVideo)
    },

    /**
     * 获取视频数据
     */
    getVideoById (id) {
      let video = null
      this.videos.forEach(v => {
        if (v.id === id) {
          video = v
        }
      })
      return video
    },

    /**
     * 获取缩略图的URL
     */
    getThumbnailUrl (id) {
      return thumbnailService.getUrl(id)
    }
  }
}
</script>
